<template>
  <div id="SearchServe-main">
    <model-title>
        服务包详情
    </model-title>
    <div class="s-serve-con">
        <div class="s-serve-img">
            <img :src="list.serve_img" alt="">
        </div>
        <div class="s-serve-dv">
            <p class="s-serve-title">
                {{ list.serve_name }}
            </p>
            <p class="s-serve-price">
                订购定价
                <span class="s-serve-txt01" style="color:red">￥{{ list.serve_price }}</span>
            </p>
            <p class="s-serve-lable">
                标签
                <span class="s-serve-label02" :style={background:bgColor}> {{ lableText }} </span>
            </p>
            <p class="s-serve-obj">
                服务对象
                <span class="s-serve-txt02"> {{ list.serve_obj }} </span>
            </p>
            <p class="s-serve-signdate">
                签约周期
                <span class="s-serve-txt02"> {{ list.serve_period }} 年</span>
            </p>
            <p class="s-serve-info">
                服务介绍
                <span class="s-serve-txt02"> {{ list.serve_info }} </span>
            </p>
        </div>
    </div>
    
    <div id="s-serve-footer">
        <el-divider class="line"></el-divider>
        <el-button type="primary" @click="editFn">编辑</el-button>
        <el-button type="success" v-if="list.serve_status == 2" @click="updateState(1)">审核通过</el-button>
        <el-button type="success" v-if="list.serve_status == 3" @click="updateState(2)">启用</el-button>
        <el-button type="warning" v-if="list.serve_status == 1" @click="updateState(3)">停用</el-button>
        <el-button type="danger" v-if="list.serve_status == 2"  @click="updateState(4)">驳回</el-button>
        <el-button @click="fanhui">返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
import ModelTitle from '@/components/ModelTitle.vue'
export default {
  components: { ModelTitle },
    created(){
        this.servePageLoad()
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    data () {
        return {
            list:{},
            lableText:"",
            bgColor:""
        }
    },
    methods:{
        servePageLoad(){
            axios({
                url:"/data/getServeById",
                method:"get",
                params:{
                    id:this.$route.query.id
                }
            }).then(res =>{
                this.list = res.data
                this.lableTextFn()
            })
        },
        lableTextFn(){
            if(this.list.serve_lable == 1){
                this.lableText = "随访服务"
                this.bgColor = "#FEE3E1"
            }else if(this.list.serve_lable == 2){
                this.lableText = "常规护理"
                this.bgColor = "#D1EEE6"
            }else if(this.list.serve_lable == 3){
                this.lableText = "随访服务"
                this.bgColor = "#D8F6ED"
            }else if(this.list.serve_lable == 4){
                this.lableText = "慢病管理"
                this.bgColor = "#FEE3E1"
            }else if(this.list.serve_lable == 5){
                this.lableText = "中医服务"
                this.bgColor = "#DEE0F8"
            }else if(this.list.serve_lable == 6){
                this.lableText = "儿童护理"
                this.bgColor = "#DEE0F8"
            }
        },
        fanhui(){
            this.$router.back()
        },
        editFn(){
            this.$router.push({
                path:"/addServePage",
                query:{
                    id:this.$route.query.id
                }
            })
        },
        updateState(uid){
            axios({
                url:"/data/updateState",
                method:"get",
                params:{
                    servePage:this.list,
                    num:uid
                }
            }).then(res =>{
                this.$message({
                    message: '操作成功！！！',
                    type: 'success'
                });
                this.servePageLoad()
            })
        }
    }
}
</script>

<style>
    #s-serve-footer{
        height: 70px;
        margin-top: 20px;
    }
    .line{
        margin-top: 0px;
        height: 0.5px;
        background: rgba(153, 240, 251, 0.489);
    }
    #SearchServe-main{
        width: 1150px;
        background: white;
        margin: 20px auto;
        box-sizing: border-box;
        padding: 10px 20px;
    }
    .s-serve-con{
        width: 100%;
        height: 300px;
        background: #F2F7FB;
        box-sizing: border-box;
        padding: 20px;
        display: flex;
    }
    .s-serve-img{
        width: 340px;
        height: 100%;
        background: white;
    }
    .s-serve-img img{
        width: 100%;
    }
    .s-serve-dv{
        height: 100%;
    }
    .s-serve-dv p{
        margin-left: 20px;
    }
    .s-serve-title{
        font-size: 18px;
        margin-top: 0px;
    }
    .s-serve-price,
    .s-serve-lable,
    .s-serve-obj,
    .s-serve-signdate,
    .s-serve-info{
        font-size: 13px;
        margin-top: 25px;
        color: rgb(95, 95, 95);
        position: relative;
    }
    .s-serve-txt01,
    .s-serve-txt02,
    .s-serve-label02{
        display: inline-block;
        width: 100%;
        color: black;
        position: absolute;
        left: 70px;
    }
    .s-serve-label02{
        width: 80px;
        padding: 5px 10px;
        border-radius: 20px;
        text-align: center;
        color: rgb(196, 122, 242);
        margin-top: -5px;
    }
</style>